<template>
    <a-form ref="formRef" :model="model" :rules="rules" v-bind="formItemLayout">
        <a-row :gutter="10">
            <a-col :span="12">
                <a-form-item label="文件大类" name="fileCategory">
                    <a-radio-group v-model:value="model.fileCategory" :options="fileCategoryOptions" @change="HandleFileCategoryChange"/>
                </a-form-item>
            </a-col>
            <a-col :span="12" v-if="defaultActIdShow">
                <a-form-item label="签批流" name="defaultActId">
                    <a-input v-model:value="model.defaultActId" disabled placeholder="请选择签批流"/>
                </a-form-item>
            </a-col>
            <a-col :span="12" v-if="filesClassIdShow">
                <a-form-item label="文件类别" name="filesClassId">
                    <a-select v-model:value="model.filesClassId" :options="filesClassIdOptions" :allowClear="true" placeholder="请选择文件类别" @change="HandlefilesClassIdChange"/>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="文件名称" name="fileName">
                    <a-input v-model:value="model.fileName" placeholder="请输入文件名称"/>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="有效期(天)" name="filesValidity">
                    <a-input v-model:value="model.filesValidity" placeholder="请输入有效期(天)"/>
                </a-form-item>
            </a-col>
            <a-col :span="12" v-if="filesIsNeedsTrainingShow">
                <a-form-item label="需要培训" name="filesIsNeedsTraining">
                    <a-checkbox v-model:checked="model.filesIsNeedsTraining"></a-checkbox>
                </a-form-item>
            </a-col>
            <a-col :span="12" v-if="trainOwnerShow">
                <a-form-item label="培训跟进人" name="trainOwner">
                    <a-select v-model:value="model.trainOwner" :options="trainOwnerOptions" :allowClear="true" mode="multiple" placeholder="请选择培训跟进"/>
                </a-form-item>
            </a-col>
        </a-row>
    </a-form>
</template>

<script lang='ts' setup>
    import { ref, reactive, computed, defineEmits } from 'vue';

    defineOptions({
        /** 文件基本信息表单 */
        name: 'FileBasicInfoForm',
    });

    const model: any = defineModel({
        type: Object, // 类型检查
        required: true, // 是否必填
        // 默认值
        default: {
            fileCategory: '2', // 文件大类【默认 '体系文件'】
            filesClassId: '', // 文件类别
            defaultActId: '', // 签批流【文件类型为临时文件时展示】
            fileName: '', // 文件名称
            filesValidity: '', // 有效期(天)
            filesIsNeedsTraining: false, // 需要培训 checkbox【文件类型为临时文件时展示】
            trainOwner: '', // 培训跟进人 select【需要培训 勾选中 展示】
        }, 
    });
    // 将对象转换为响应式对象
    // const reactiveModel = reactive(model.value);

    const emits = defineEmits(['change'])

    const formRef = ref();

    const rules = ref({
        fileCategory: [{ required: true, message: '请选择文件大类', trigger: 'change' }],
        filesClassId: [{ required: true, message: '请选择文件类别', trigger: 'change' }],
        fileName: [{ required: true, message: '请输入文件名称', trigger: ['change', 'blur'] }],
    })
    // "emit('update:modelValue', $event.target.value)"
    const formItemLayout = ref({
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    });

    const fileCategoryOptions = computed(() =>{
        return [
            { label: '体系文件', value: '2' },
            { label: '临时文件', value: '1' },
            { label: '外来文件', value: '4' },
        ]
    });
    const filesClassIdOptions = computed(() => {
        let options =  [
            { label: '程序文件', value: 136 },
            { label: '质量记录', value: 137 },
            { label: '管理流程类文件', value: 138 },
            { label: '管理手册', value: 139 },
            { label: '作业指导书', value: 140 },
            { label: '外部外来文件', value: 135 },
        ];
        if ('4' === model.value?.fileCategory) {
            options = [
                { label: '外部外来文件', value: 135 },
            ]
        }
        return options;
    });
    const trainOwnerOptions = computed(() => {
        return [
            { label: 'ahernandez31/Agustin Aguilera Hernandez', value: 'ahernandez31' },
            { label: 'arenteria2/Angel Daniel Renteria Almaraz', value: 'arenteria2' },
            { label: 'atorre2/Adriana Lievano de la Torre', value: 'atorre2' },
            // ...
        ]
    })

    const defaultActIdShow = computed(() => {
        return '1' === model.value.fileCategory;
    });
    const filesClassIdShow = computed(() =>{
        return '1' !== model.value.fileCategory;
    });
    const filesIsNeedsTrainingShow = computed(() =>{
        return '1' === model.value.fileCategory;
    });
    const trainOwnerShow = computed(() =>{
        return model.value.filesIsNeedsTraining;
    });

    function HandleFileCategoryChange(e: Event) {
        const target: any = e.target || e.srcElement;
        const value = target?.value;
        // 【文件类型为临时文件时展示签批流】
        if ('1' === value) {
            model.value.defaultActId = 'STEP1';
            model.value.filesValidity = 30;
            model.value.filesIsNeedsTraining = true;
        } else {
            model.value.defaultActId = '';
            model.value.filesValidity = '';
            model.value.filesIsNeedsTraining = false;
        }
        model.value.filesClassId = '';
        emits('change', model.value);
    }
    function HandlefilesClassIdChange(value: string | number) {
        emits('change', model.value);
    }

    function validate() {
        return new Promise((resolve) => {
            formRef.value.validate().then((values) => {
                console.log('values', values);
                resolve({valid: true, values});
            })
            .catch(error => {
                console.log('error', error);
                resolve({valid: false, values: error?.values});
            });
        })
    }
    // 对外暴露属性方法
    defineExpose({
        validate,
    });

</script>

<style scoped lang="less">
</style>